<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'factor.add'">创建</el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 160px" v-model="query.coding_type" placeholder="选择类型" filterable
        clearable>
        <el-option v-for="(item, index) in codingTypes" :key="index" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
      <el-input style="width: 300px" placeholder="输入查询条件按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'factor',
  data: function () {
    return {
      api: this.$api.factor,
      apiEdit: this.$api.factor + 'modify',
      apiCreate: this.$api.factor + 'modify',
      name: '条码要素',
      columns: [
        { title: '类型', key: 'coding_type', width: 100 },
        { title: '代码', key: 'coding_param', width: 100 },
        { title: '说明', key: 'coding_desc' },
        { title: '公式', key: 'coding_formula', width: 160 },
        { title: '长度', key: 'coding_length', width: 80 },
        { title: '填充字符', key: 'pad_left_char', width: 80 },
        { title: '特殊进制', key: 'metric_flag', width: 80 },
        { title: '样例数据', key: 'sample_value', width: 160 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [
        {
          title: '类型',
          key: 'coding_type',
          name: 'select',
          options: [],
          span: 12,
          required: true,
          events: {
            change: null,
          },
        },
        {
          title: '代码',
          key: 'coding_param',
          span: 12,
          required: true,
          tips: '类型为View时，填写视图名称',
        },
        { title: '说明', key: 'coding_desc' },
        {
          title: '公式/Key',
          key: 'coding_formula',
          props: { disabled: false },
          tips: '类型为Datetime时，填写C#格式化字符串；类型为View时，填写视图的Key字段名',
        },
        { title: '长度', key: 'coding_length', name: 'number', span: 8, props: { disabled: false } },
        {
          title: '填充字符',
          key: 'pad_left_char',
          span: 16,
          props: { disabled: false },
          tips: '当结果值无法达到长度规定时，在左侧进行补充的字符',
        },
        {
          title: '特殊进制',
          key: 'metric',
          span: 8,
          name: 'switch',
          props: { disabled: false, activeValue: 1, inactiveValue: 0 },
          tips: '选中表示将采用特殊的进制进行换算，否则为十进制',
        },
        { title: '进制字符', key: 'metric_special_string', span: 16, props: { disabled: false } },
        { title: '样例数据', key: 'sample_value' },
        { title: '备注', key: 'remarks', name: 'textarea' },
      ],
      initData: {
        metric: 0,
      },
      codingTypes: [
        { label: 'Datetime 日期时间', value: 'Datetime' },
        { label: 'String 固定字串', value: 'String' },
        { label: 'SerialNumber 流水号', value: 'SerialNumber' },
        { label: 'View 视图', value: 'View' },
        { label: 'Param 参数', value: 'Param' },
      ],
    }
  },
  methods: {
    formatList(list) {
      //依据实际需求处理
      let tmp = _.cloneDeep(list)
      return tmp.map((i) => {
        i.metric_flag = i.metric == 1 ? 'Y' : ''
        return i
      })
    },
    formatAfterGet(data) {
      //依据实际需求处理
      this.typeChange(data.coding_type)
      return data
    },
    typeChange(v) {
      this.getFieldConfig('coding_formula').props.disabled = true
      this.getFieldConfig('coding_length').props.disabled = true
      this.getFieldConfig('pad_left_char').props.disabled = true
      this.getFieldConfig('metric').props.disabled = true
      this.getFieldConfig('metric_special_string').props.disabled = true
      if (v == 'Datetime') {
        this.getFieldConfig('coding_formula').props.disabled = false
        this.getFieldConfig('metric').props.disabled = false
        this.getFieldConfig('metric_special_string').props.disabled = false
      } else if (v == 'String') {
      } else if (v == 'SerialNumber') {
        this.getFieldConfig('coding_length').props.disabled = false
        this.getFieldConfig('pad_left_char').props.disabled = false
        this.getFieldConfig('metric').props.disabled = false
        this.getFieldConfig('metric_special_string').props.disabled = false
      } else if (v == 'View') {
        this.getFieldConfig('coding_formula').props.disabled = false
      } else if (v == 'Param') {
      }
    },
  },
  created: function () {
    this.setFieldOptions('coding_type', this.codingTypes, 'value', 'label')
    this.getList()
    this.getFieldConfig('coding_type').events.change = this.typeChange
  },
}
</script>
<style scoped>
</style>
